<template>
  <div class="searchList">
    <div class="ItemMusicBottomList" @click="getPlayList_vuex(searchList); changeIndex($event)" v-for="(item,index) in searchList" :key="item.id" :index="index">
        <div class="ItemMusicBottomList_left">
            <div>{{index+1}}</div>
            <div>
                <div class="songName">{{item.name}}</div>
                <div class="songer"><span v-for="(item,index) in item.ar" :key="index">{{item.name}}&nbsp;</span></div>
            </div>
        </div>
        <div class="ItemMusicBottomList_right">
            <div class="play" v-if="item.mv!=0"><span class="icon-play3"></span></div>
            <div class="menu"><span class="icon-list2"></span></div>
        </div>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations, mapActions} from 'vuex'
export default {
    name: "searchConcent",
    computed: {
        ...mapState(['searchList']),
    },
    methods: {
        ...mapMutations(['getSearchList','getPlayList_vuex','changeIndex_vuex']),
        changeIndex(e) {
            let i=e.currentTarget.getAttribute("index");
            this.changeIndex_vuex(i);
        }
    },
    destroyed() {
        this.getSearchList(null);
    }
}
</script>

<style scoped>
.searchList {
    padding: .2rem;
}
.ItemMusicBottomList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1rem;
    margin: .2rem 0;
}
.ItemMusicBottomList_left {
    display: flex;
    align-items: center;
    width: 65%;
}
.ItemMusicBottomList_left>div:nth-child(1) {
    width: .45rem;
    text-align: center;
}
.ItemMusicBottomList_left>div:nth-child(2) {
    width: 80%;
    margin-left: .4rem;
}
.songName {
    width: 100%;
    font-weight: 700;
    white-space: nowrap;  
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.songer {
    width: 100%;
    opacity: .5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .25rem;
}
.ItemMusicBottomList_right {
    display: flex;
    justify-content: space-between;
    opacity: .6;
    font-size: .4rem;
}
.play {
    margin: 0 .4rem;
}
</style>